/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-11-04 15:01:50
 */
import React, { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";

import { AtFloatLayout, AtAvatar, AtTextarea } from 'taro-ui'

import { saveComment } from '@/api/user'
import { showToast } from '@/utils/index'

import styles from './index.module.scss'


function Comment(props) {
  const { showComment = false, handleClose = () => {},saveSuccess  = () => {}, starCount = 5, flavorCount = 5, statisfyCount = 5, commentItem = {}, starComps, flavorComps, statisfyComps } = props

  const [isOpened, setIsOpened] = useState<boolean>(showComment);
  const [textAreaVal, setTextAreaVal] = useState<string>('')

  const saveForm = () => {
    Taro.showLoading({ title: "正在保存...", mask: true })
    const params = {
      orderId: commentItem.orderSId,
      shopId: commentItem.shopSId,
      totalGrade: starCount,
      tasteGrade: flavorCount,
      packGrade: statisfyCount,
      content: textAreaVal,
      isAnonymity: 1 // 是否匿名
     }
     saveComment(params).then(()=> {
      resetHandle()
      saveSuccess()
      
      Taro.hideLoading();
     })
  }

  const textAreaChange = (val) => {
    setTextAreaVal(val)
  }

  const resetHandle = () => {
    setTextAreaVal('')
  }
  
  // 模态框关闭事件
  const modalOnClose = () => {
    resetHandle()
    handleClose()
  }

  // 提交
  const submitHandle = () => {
    if (!textAreaVal) return showToast("请输入评价")
    saveForm()
  }

  useEffect(() => {
    setIsOpened(showComment)
  }, [showComment]);

  return (
    <View className={styles.comment}>
        <AtFloatLayout isOpened={isOpened} title='评价' onClose={modalOnClose}>
          <View className={styles.header}>
            <AtAvatar circle image={commentItem.shopImageUrl} className={styles.headerImg} size='small'></AtAvatar>
            <View className={styles.shopName}>{commentItem.shopName}</View>
          </View>
          <View className={styles.container}>
            <View className={styles.starCtx}>
              { starComps }
            </View>
            <View className={styles.smileIcon}>
              <View className={styles.flavor}>
                <View className={styles.label}>口味</View>
                { flavorComps }
                <View className={styles.desc}>满意</View>
              </View>
              <View className={styles.flavor}>
                <View className={styles.label}>包装</View>
                { statisfyComps }
                <View className={styles.desc}>不满意</View>
              </View>
            </View>

            <View className={styles.textAreaBox}>
              <AtTextarea
                value={textAreaVal}
                onChange={textAreaChange}
                height={90}
                maxLength={200}
                placeholder='请输入...'
                cursorSpacing={120}
                placeholderClass={styles.placeholderClass}
                showConfirmBar
              />
            </View>

            <View className={styles.operateBtn} onClick={submitHandle}>
              <View className={styles.txt}>提交</View>
            </View>
            
          </View>
        </AtFloatLayout>
    </View>
  );
}

export default Comment
